<template>
    <div class="backgImage">
        <div class="div1">
            <TitleView title="消防设备统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <SafeXLeftA :data="dataA.xiaofangshuan" title="消防栓" :imgUrl="image1" />
                <SafeXLeftA :data="dataA.xiaofangpao" title="消防炮" :imgUrl="image2" />
                <SafeXLeftA :data="dataA.xiaofangjing" title="消防阀井" :imgUrl="image1" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="问题统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <div class="div1_d_flex">
                    <div class="div1_d_flex_div div1_d_flex_div1">重要问题</div>
                    <div class="div1_d_flex_div div1_d_flex_div2">一般问题</div>
                    <div class="div1_d_flex_div div1_d_flex_div1">自查问题</div>
                </div>
                <div class="flex div1_d_j">
                    <SafeXLeftB :data="dataB.yiban" title="一般风险" :imgUrl="image3" />
                    <SafeXLeftB :data="dataB.jiaoda" title="较大风险" :imgUrl="image4" />
                    <SafeXLeftB :data="dataB.zhongda" title="重大风险" :imgUrl="image5" />
                </div>
            </div>
        </div>
        <div class="div2">
            <TitleView title="作业区域统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <SafeXLeftC :data="DataDevice" />
            </div>
        </div>
    </div>
</template>

<script>
import SafeXLeftC from "./components/SafeXLeftC.vue";
import SafeXLeftA from "./components/SafeXLeftA.vue";
import SafeXLeftB from "./components/SafeXLeftB.vue";
import image1 from "@/assets/组 1075.png"
import image2 from "@/assets/组 1076.png"
import image3 from "@/assets/组 1075(1).png"
import image4 from "@/assets/组 1075(2).png"
import image5 from "@/assets/组 1075(3).png"
import { safex_left } from "@/request/api";
export default {
    components: {
        SafeXLeftC,
        SafeXLeftA,
        SafeXLeftB
    },
    data() {
        return {
            image1: image1,
            image2: image2,
            image3: image3,
            image4: image4,
            image5: image5,
            DataDevice: [],
            dataA:{
                xiaofangshuan:"0",
                xiaofangpao:"0",
                xiaofangjing:"0",
            },
            dataB:{
                yiban:"0",
                jiaoda:"0",
                zhongda:"0",
            }
        };
    },
    created() {
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },
        getData() {
            safex_left().then((res) => {
                console.log("res:", res);
                this.dataA=res.data.data1
                this.dataB=res.data.data2
                this.DataDevice=res.data.data3
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.div1 {
    height: 277px;

    .div1_d {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }
}

.div2 {
    height: 343px;

    .div1_d {
        margin-top: 20px;

        .div1_d_flex {
            display: flex;
            align-items: center;
            margin-bottom: 34px;

            .div1_d_flex_div {
                width: 88px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #D0E5F5;
            }

            .div1_d_flex_div1 {
                background: url("@/assets/组 1075(4).png");

            }

            .div1_d_flex_div2 {
                background: url("@/assets/组 1075(6).png") no-repeat;
                width: 80px;
                height: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 3px;
                

            }

            .div1_d_flex_div3 {
                background: url("@/assets/组 1075(4).png");

            }
        }

        .div1_d_j {
            justify-content: space-between;
        }
    }
}

.div3 {
    .div1_d {}
}
</style>
